<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>新增酒店</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen" />

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript"
            src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css" type="text/css"
          media="screen" />
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=TwXaDoiARGCBy5vtuAp2afWiiW84Kj6o"></script>
    <script>
        $(function () {
            $.ajax({
               url: "/system/cityListJson",
               dataType: "json",
               success:function (data){
                   var html = "<option>---请选择---</option>";
                   for (var i = 0;i<data.length;i++){
                       html += "<option value='"+data[i].id+"'>"+data[i].cityName+"</option>";
                   }
                   $("#cid").html(html);
               }
            });
        });
        function openMap() {
            initMap();
            $("#map_dialog").dialog({
                title: "百度地图",
                width: 800,
                higth: 600,
                model: true
            });
        }
        function initMap() {
            var map = new BMap.Map("container");

            var cityName = $("#cid option:selected").text();

            map.centerAndZoom(cityName, 15);

            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            var myGeo = new BMap.Geocoder();     //逆地址解析

            map.addEventListener("click", function(e){
                alert(e.point.lng + ", " + e.point.lat);

                $("#lon").val(e.point.lng);
                $("#lat").val(e.point.lat);

                map.clearOverlays();
                var marker = new BMap.Marker(e.point);        // 创建标注
                map.addOverlay(marker);                     // 将标注添加到地图中
                var pt = e.point;
                myGeo.getLocation(pt, function(rs) {
                    var addComp = rs.addressComponents;
                    var addr = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                    $("#address").val(addr);
                });
            });
        }
    </script>
</head>
<body>
<div id="main-content">
    <div class="content-box">
        <div class="content-box-content">
            <div class="tab-content default-tab" id="tab2">
                <form action="/system/hotaladd" method="post" enctype="multipart/form-data">
                    <fieldset>
                        <p>
                            <label>酒店标题</label> <input
                                class="text-input small-input" type="text" id="hotalName"
                                name="hotalName" />
                        </p>
                        <p>
                            <label>图片上传</label> <input
                                class="text-input small-input" type="file" id="file"
                                name="file" />
                        </p>
                        <p>
                            <label>关键词</label> <input
                                class="text-input medium-input datepicker" type="text"
                                id="keyword" name="keyword" />
                        </p>
                        <p>
                            <label>所在城市</label>
                            <select id="cid" name="cid" class="small-input">

                            </select>
                        </p>
                        <p>
                            <label>行政区域</label> <input
                                class="text-input small-input" type="text" id="regid"
                                name="regid" />
                        </p>
                        <p>
                            <button type="button" class="mybutton" onclick="openMap()">打开地图</button>
                        </p>
                        <p>
                            <label>酒店经度</label> <input
                                class="text-input small-input" type="text" id="lon"
                                name="lon" />
                        </p>
                        <p>
                            <label>酒店纬度</label> <input
                                class="text-input small-input" type="text" id="lat"
                                name="lat" />
                        </p>
                        <p>
                            <label>酒店地址</label> <input
                                class="text-input small-input" type="text" id="address"
                                name="address" />
                        </p>
                        <p>
                            <label>酒店星级</label> <input
                                class="text-input small-input" type="text" id="star"
                                name="star" />
                        </p>
                        <p>
                            <label>酒店品牌</label> <input
                                class="text-input small-input" type="text" id="brand"
                                name="brand" />
                        </p>
                        <p>
                            <label>酒店类型</label>
                            <select name="type" class="small-input">
                            <option value="1">星级酒店</option>
                            <option value="2">商务酒店</option>
                            <option value="3">快捷酒店</option>
                            <option value="4">主题酒店</option>
                            </select>
                        </p>
                        <p>
                            <label>开业时间</label> <input
                                class="text-input small-input" type="date" id="openTime"
                                name="openTime" />
                        </p>
                        <p>
                            <label>酒店描述</label>
                            <textarea class="text-input textarea wysiwyg" id="hotalInfo"
                                      name="hotalInfo" cols="79" rows="15"></textarea>
                        </p>
                        <p>
                            <input class="mybutton" type="submit" value="提交" />
                        </p>
                    </fieldset>
                    <div class="clear"></div>
                </form>
            </div>
            <!-- End #tab2 -->
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<div id="map_dialog" style="display:none">
    <div id="container"></div>
</div>
<!-- End #main-content -->
</body>
</html>